import Taro, {Component, Config} from '@tarojs/taro'
import { Button, Image, RichText, Text, View } from '@tarojs/components'
import './index.scss'
import lodash from "@/utils/lodash"
import { getPinkOrder } from "@/api/pinkApi"
import { getOrderInfo } from "@/api/orderApi"
import { getSharePath, getPinkConfig } from "@/utils/storage"
import { toGoodsPage } from "@/utils/page_router"
import { PINK_GOODS_PAGE_URL } from "@/config/config"
import { formatTime, formatHtml, getSubscribeMessage } from "@/utils/utils"
import { GroupsCountdown, Loading } from "@/components/index"
import OrderCardGoods from "@/components/order/cart-goods"

export default class Index extends Component {
  state: any
  config: Config = {
    navigationBarTitleText: '拼团中'
  }

  constructor() {
    super(...arguments)
    const { params } = this.$router
    this.state = {
      id: params.id,
      loading: true,
      cartList: [],
      userList: [],
      pinkInfo: {},
      explainHtml: formatHtml(getPinkConfig('fightGroupsExplain'))
    }
  }

  componentDidShow() {
    this.getInfo()
  }

  //  分享小程序
  onShareAppMessage() {
    const { pinkInfo } = this.state
    return { title: pinkInfo.productSnap.name, path: getSharePath(PINK_GOODS_PAGE_URL, { id: pinkInfo.productId, pinkId: pinkInfo.id }) }
  }

  //  获取订单详情
  async getInfo() {
    const { data: { partakeList, ...pinkInfo } } = await getPinkOrder(this.state.id)
    const { data: { cartSnap } } = await getOrderInfo(this.state.id)
    const userList:any = []
    for (let i=0; i<pinkInfo.totalNum; i++){
      userList.push(partakeList[i] ? partakeList[i] : null)
    }
    const people = pinkInfo.totalNum - pinkInfo.currencyNum
    pinkInfo.people = people <= 0 ? 0 : people
    this.setState({
      pinkInfo,
      cartList: cartSnap,
      userList
    }, () => {
      this.setState({
        loading: false
      })
    })
  }

  //  开启订单变动提醒
  openMessage() {
    wx.requestSubscribeMessage({ tmplIds: getSubscribeMessage('pinkOrder') })
  }

  render() {
    const { loading, cartList, userList, pinkInfo, explainHtml } = this.state
    return (<View className='page'>
      {loading && <Loading isCover/>}
      <View className='cart-list thin-border__b'>
        {cartList.map(cart => {
          return (<OrderCardGoods key={cart.id} info={cart} isJump className='cart-item'/>)
        })}
      </View>
      <View className='group-box'>
        <View className='group-info'>
          <View className='group-time f-g-5'>
            -离成团还差 <Text className='group-number bnn-number'>{pinkInfo.people}</Text> 人，<GroupsCountdown seconds={pinkInfo.leftTime}/> 后结束-
          </View>
          <View className='user-list d-f f-w-w j-c-c'>
            {userList.map((user, key) => {
              return (<View key={key} className='user-item f-g-5'>
                {user && <Image src={user.headImg} className='user-avatar'/>}
                {!user && <View className='bnn-icon user-icon'>&#xe7ae;</View>}
              </View>)
            })}
          </View>
          <Button openType='share' className='group-btn xf-btn xf-btn-primary xf-btn-round'>邀请好友快来参加</Button>
          <View className='bnn-icon f-g-5 group-remind'>
            <View className='remind-text' onClick={this.openMessage.bind(this)}>&#xe709; 订单变动提醒我</View>
          </View>
        </View>
      </View>
      <View className='card'>
        <View className='card-head'>参团记录</View>
        <View className='card-body record-list'>
          {userList.map((user, key) => {
            return user && (<View key={key} className='record-item d-f'>
              <Image src={user.headImg} className='user-avatar'/>
              <View className='user-info d-f f-d-c j-c-c'>
                <View className='user-name f-g-4'>{user.nickName}{key === 0 && <View className='user-tag f-g-5'>团长</View>}</View>
                <View className='user-time'>{formatTime(user.createdAt, 'YYYY-MM-DD HH:mm')}</View>
              </View>
            </View>)
          })}
        </View>
      </View>
      <View className='rich-text-wrap card'>
        <View className='card-head'>参团须知</View>
        {/*<Image src={explainImg} mode='widthFix'/>*/}
        <RichText nodes={explainHtml} />
      </View>
      <View className='page-foot--height'/>
      <View className='page-foot f-g-5'>
        <Button className='foot-btn xf-btn xf-btn-primary xf-btn-round' onClick={() => toGoodsPage(lodash.head(cartList))}>商品详情</Button>
      </View>
    </View>)
  }
}
